<template>
	<!-- 我的订单 -->
	<view>
		<!-- 步骤 -->
		<scroll-view class="bg-white nav text-center fixed navOrder" :style="[{top:0 + 'upx'}]" >
			<view class="cu-item tap_highlight"
			:class="item.key==tabType?'text-primary':''"
			style="margin: 0 10upx 20upx 0;"
    			 v-for="(item,index) in tabList" :key="index"
			:data-id="index" @tap="changeTab(item.key)">
				<view style="position:relative">
					{{item.name}}
					<text v-if="item.key==tabType" class="cuIcon-title" style="position:absolute;bottom:-40upx;left:45%"></text>
				</view>
			</view>
		</scroll-view>
		<!-- 订单列表 -->
		<order ref="orderLists" :tab="tabType" @actionClick="actionClick"></order>
		<!-- 删除订单 模态框 -->
		<del-modal :modalName="modalName" @confirmClick="deleteSubmit" @changeModalName="changeModalName"></del-modal>
		<!-- 错误提示 模态框 -->
		<error-modal :modalName="modalName" :errCode="errCode" @changeModalName="changeModalName"></error-modal>
		<!-- 退款 模态框 -->
		<refund-modal ref="refundModalRef" :modalName="modalName" @changeModalName="changeModalName" @refundClick="refundClick"></refund-modal>
	</view>
</template>

<script>
  import order  from './module/order/scroll.vue'
  import delModal  from './module/order/delModal.vue'
  import errorModal from "../components/modal/error.vue"
  import refundModal from "../components/modal/refundModal.vue"
	import logins from '@/utils/loginApi.js'
	import { getOrderDelete, RequestRefund } from '@/API/api.js'
	import wxMessage from '@/utils/wx.js'
  import orderStatus from "@/jvss/pageCloud/utils/pay"

  const { handleLogin, httpReturn } = logins(); //登录
  const { wxPay } = wxMessage();
  const { handleClear } = orderStatus();

  export default {
    components: {
      order,
      delModal,
      errorModal,
      refundModal
    },
    data() {
      return {
        tabType: uni.getStorageSync('jfOrderType') ? uni.getStorageSync('jfOrderType') : 'all',//菜单类型
        // 菜单列表
        tabList: [],
        // NavHeight:proxy.NavHeight,
        NavHeight: 128,
        modalName:'',
        // 操作
        action:{
          type:null,
          item:{},
          index:0
        },
        errCode:'',//错误提示
        orderId:'',//订单id
        automaticPayment:false
      }
    },
    onLoad(opt) {
      handleClear()
    },
    onUnload() {
      uni.removeStorageSync('jfOrderType')
    },
    onShow() {
      this.tabList = [
        {key:'create',name:this.$t('JLink.order.list.tabs.create'),icon:"pay"},//待付款
        {key:'pay',name:this.$t('JLink.order.list.tabs.pay'),icon:"edit"},//正在开通
        {key:'all',name:this.$t('JLink.order.list.tabs.all'),icon:"order"}//全部订单
      ]
      handleLogin(()=>{
        this.changeTab(this.tabType);
      })
    },
    methods: {
      // 菜单切换iosPayClick
      changeTab (key) {
        this.tabType = key;
        uni.setStorageSync('jfOrderType',key)
        this.$nextTick(() => {
          this.$refs.orderLists.tabChange(key)
        })
      },
      actionClick (type,item,index){
        this.action = {type,item,index};
        const { orderId,automaticPayment,deviceId,classifyId } = item;
        this.orderId = orderId;
        this.automaticPayment = automaticPayment;//判断是否是自动续费
        switch(type){
          // 删除
          case 'delete':
						this.$postPointData({code:'603090', eventName:'orders_delete_button'})
            this.modalName = 'delModal'
            break;
          case 'pay':
						this.$postPointData({code:'603088', eventName:'orders_pay_button'})
            // 小程序支付
            wxPay(orderId)
            break;
          case 'refund':
						// 退款
						this.$postPointData({code:'603086', eventName:'orders_refund_button'})
						this.$refs.refundModalRef.clearFrom();
            this.modalName = 'refundModal'
        }
      },
      deleteSubmit () {
        const { orderId } = this.action.item;
        getOrderDelete({orderId}).then(res=>{
          httpReturn(res,(data)=>{
            const {status} = data;
            if (status){
			  this.modalName = '';
              this.$refs.orderLists.handleDelete(this.action.index);
							this.$postPointData({code:'603091', eventName:'orders_delete'})
							this.$forceUpdate();
            }
          },(code)=>{
            this.modalName = 'errorMessage';
            this.errCode = '-100'//删除失败
          })
        }).catch(err=>{
          this.modalName = 'errorMessage';
          this.errCode = '-101'//请求失败
        })
      },
      changeModalName (value) {
        this.modalName = value
      },
      refundClick (message) {
        const {refundReason,contact} = message
        RequestRefund({contact,refundReason,orderId:this.orderId}).then(res=>{
          httpReturn(res,(data)=>{
            if(data){
              this.modalName = '';
              this.$refs.orderLists.tabChange(this.tabType);
							this.$postPointData({code:'603087', eventName:'orders_refund'})
			  this.$forceUpdate();
            }
          },(code)=>{
            this.modalName = 'errorMessage';
            this.errCode = code
          })
        }).catch(()=>{})
      },
      iosPayClick (code) {
        this.modalName = 'errorMessage';
        this.errCode = code//请求失败
      }
    }
  }
</script>

<style lang="less" scope>
@import '@/common/style/main.css';
</style>
